<div class="content-section introduction">
    <div class="feature-intro">
        <h1>PickList</h1>
        <p>PickList is used to reorder items between different lists.</p>
    </div>
    <app-demoActions github="picklist" stackblitz="picklist-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true"
            [responsive]="true" [sourceStyle]="{'height':'30rem'}" [targetStyle]="{'height':'30rem'}" filterBy="name"
            sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name">
            <ng-template let-product pTemplate="item">
                <div class="product-item">
                    <div class="image-container">
                            <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image" />
                    </div>
                    <div class="product-list-detail">
                        <h5 class="mb-2">{{product.name}}</h5>
                        <i class="pi pi-tag product-category-icon"></i>
                        <span class="product-category">{{product.category}}</span>
                    </div>
                    <div class="product-list-action">
                        <h6 class="mb-2">${{product.price}}</h6>
                        <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
                    </div>
                </div>
            </ng-template>
        </p-pickList>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>CDK</h5>
            <p>PickList depends on @angular/cdk's DragDropModule so begin with installing CDK if not already installed.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
npm install @angular/cdk --save
</app-code>

            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;PickListModule&#125; from 'primeng/picklist';
</app-code>

            <h5>Getting Started</h5>
            <p>PickList requires two arrays as its lists and a ng-template for the item content where each item in the array
                can be accessed inside the ng-template using a local <i>ng-template</i> variable.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [source]="list1" [target]="list2"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div&gt;
            &lt;img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48"&gt;
            &lt;div style="font-size:14px;float:right;margin:15px 5px 0 0"&gt;{{car.brand}} - {{car.year}} - {{car.color}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-pickList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class MyComponent &#123;

    list1: any[];

    list2: any[];

    ngOnInit() &#123;
        this.list1 = //initialize list 1
        this.list2 = //initialize list 2
    &#125;
&#125;
</app-code>
            <h5>Responsive</h5>
            <p>In responsive mode, picklist adjusts its controls based on screen size. To activate this mode, set <i>responsive</i> as true.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [responsive]="true"&gt;
</app-code>

            <h5>Headers</h5>
            <p><i>sourceHeader</i> and <i>targetHeader</i> attributes are used to define captions for the lists.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList sourceHeader="Source List" targetHeader="Target List"&gt;
</app-code>

            <h5>Multiple Selection</h5>
            <p>Multiple items can either be selected using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
            devices metaKeySelection is turned off automatically.</p>

            <h5>Filtering</h5>
            <p>Options can be filtered using an input field in the overlay by enabling the filterBy property.
                This <i>filterBy</i> property decides which field to search(Accepts multiple fields with a comma).</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [source]="sourceCars" [target]="targetCars" filterBy="brand"&gt;&lt;/p-pickList&gt;
</app-code>

            <h6>Templating</h6>
            <p><i>sourceFilter</i> and <i>targetFilter</i> can easily be customized with the filter content instead of using the built-in modes.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [source]="sourceCars" [target]="targetCars" filterBy="brand"&gt;
    &lt;ng-template pTemplate="sourceFilter" let-options="options"&gt;
        &lt;div class="p-picklist-filter"&gt;
            &lt;input [(ngModel)]="sourceFilterValue" type="text" (keyup)="options.filter($event.target.value)" role="textbox" class="p-picklist-filter-input p-inputtext p-component"&gt;
            &lt;span *ngIf="sourceFilterValue" class="p-picklist-filter-icon pi pi-times" (click)="options.reset(); sourceFilterValue = ''"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="targetFilter" let-options="options"&gt;
        &lt;div class="p-picklist-filter"&gt;
            &lt;input [(ngModel)]="targetFilterValue" type="text" (keyup)="options.filter($event.target.value)" role="textbox" class="p-picklist-filter-input p-inputtext p-component"&gt;
            &lt;span *ngIf="targetFilterValue" class="p-picklist-filter-icon pi pi-times" (click)="myResetFunction(options)"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-pickList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; PickListFilterOptions &#125; from 'primeng/picklist';
...
export class MyComponent &#123;
    ...

    sourceFilterValue: string = '';
    
    targetFilterValue: string = '';

    myResetFunction(options: PickListFilterOptions) &#123;
        options.reset();
        this.targetFilterValue = '';
    &#125;
&#125;
</app-code>

<h5>DragDrop</h5>
<p>Items can be reordered using drag and drop by enabling <i>dragdrop</i> property along with dragdropScope to avoid conflict with other drag drop events on view.
This dragdrop property also supports cross list actions.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [source]="sourceCars" [target]="targetCars" [dragdrop]="true"&gt;&lt;/p-pickList&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>source</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects for the source list.</td>
                        </tr>
                        <tr>
                            <td>target</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects for the target list.</td>
                        </tr>
                        <tr>
                            <td>sourceHeader</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for the source list caption</td>
                        </tr>
                        <tr>
                            <td>targetHeader</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Text for the target list caption</td>
                        </tr>
                        <tr>
                            <td>filterBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).</td>
                        </tr>
                        <tr>
                            <td>filterMatchMode</td>
                            <td>string</td>
                            <td>contains</td>
                            <td>Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".</td>
                        </tr>
                        <tr>
                            <td>filterLocale</td>
                            <td>string</td>
                            <td>undefined</td>
                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                        </tr>
                        <tr>
                            <td>trackBy</td>
                            <td>Function</td>
                            <td>null</td>
                            <td>Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity. Use sourceTrackBy or targetTrackBy in
                                case different algorithms are needed per list.
                            </td>
                        </tr>
                        <tr>
                            <td>sourceTrackBy</td>
                            <td>Function</td>
                            <td>null</td>
                            <td>Function to optimize the dom operations by delegating to ngForTrackBy in source list, default algoritm checks for object identity.</td>
                        </tr>
                        <tr>
                            <td>targetTrackBy</td>
                            <td>Function</td>
                            <td>null</td>
                            <td>Function to optimize the dom operations by delegating to ngForTrackBy in target list, default algoritm checks for object identity.</td>
                        </tr>
                        <tr>
                            <td>showSourceFilter</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to show filter input for source list when filterBy is enabled.</td>
                        </tr>
                        <tr>
                            <td>showTargetFilter</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to show filter input for target list when filterBy is enabled.</td>
                        </tr>
                        <tr>
                            <td>dragdrop</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to enable dragdrop based reordering.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>sourceStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the source list element.</td>
                        </tr>
                        <tr>
                            <td>targetStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the target list element.</td>
                        </tr>
                        <tr>
                            <td>responsive</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled orderlist adjusts its controls based on screen size.</td>
                        </tr>
                        <tr>
                            <td>showSourceControls</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to show buttons of source list.</td>
                        </tr>
                        <tr>
                            <td>showTargetControls</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to show buttons of target list.</td>
                        </tr>
                        <tr>
                            <td>metaKeySelection</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                        </tr>
                        <tr>
                            <td>sourceFilterPlaceholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text on source filter input.</td>
                        </tr>
                        <tr>
                            <td>targetFilterPlaceholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text on target filter input.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component should be disabled.</td>
                        </tr>
                        <tr>
                            <td>keepSelection</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Keeps selection on the transfer list.</td>
                        </tr>
                        <tr>
                            <td>ariaSourceFilterLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the filter input of source list.</td>
                        </tr>
                        <tr>
                            <td>ariaTargetFilterLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the filter input of target list.</td>
                        </tr>
                        <tr>
                            <td>rightButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to right button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>leftButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to left button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>allRightButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to all right button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>allLeftButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to all left button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>upButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to up button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>downButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to down button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>topButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to top button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>bottomButtonAriaLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the move to bottom button for accessibility.</td>
                        </tr>
                        <tr>
                            <td>stripedRows</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to displays rows with alternating colors.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onMoveToTarget</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when items are moved from source to target.</td>
                        </tr>
                        <tr>
                            <td>onMoveToSource</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when items are moved from target to source.</td>
                        </tr>
                        <tr>
                            <td>onMoveAllToTarget</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when all items are moved from source to target.</td>
                        </tr>
                        <tr>
                            <td>onMoveAllToSource</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when all items are moved from target to source.</td>
                        </tr>
                        <tr>
                            <td>onSourceReorder</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when items are reordered within source list.</td>
                        </tr>
                        <tr>
                            <td>onTargetReorder</td>
                            <td>event.items: Moved items array</td>
                            <td>Callback to invoke when items are reordered within target list.</td>
                        </tr>
                        <tr>
                            <td>onSourceSelect</td>
                            <td>event.originalEvent: Browser event <br />
                                items: Selected items array</td>
                            <td>Callback to invoke when items are selected within source list.</td>
                        </tr>
                        <tr>
                            <td>onTargetSelect</td>
                            <td>event.originalEvent: Browser event <br />
                                items: Selected items array</td>
                            <td>Callback to invoke when items are selected within target list.</td>
                        </tr>
                        <tr>
                            <td>onSourceFilter</td>
                            <td>event.query: Filter value <br />
                                items: Filtered items</td>
                            <td>Callback to invoke when the source list is filtered</td>
                        </tr>
                        <tr>
                            <td>onTargetFilter</td>
                            <td>event.query: Filter value <br />
                                items: Filtered items</td>
                            <td>Callback to invoke when the target list is filtered</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>resetSourceFilter</td>
                            <td>-</td>
                            <td>Resets the filters of the source list.</td>
                        </tr>
                        <tr>
                            <td>resetTargetFilter</td>
                            <td>-</td>
                            <td>Resets the filters of the target list.</td>
                        </tr>
                        <tr>
                            <td>resetFilter</td>
                            <td>-</td>
                            <td>Resets the filters.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList #pl [source]="sourceCars" [target]="targetCars" filterBy="brand"&gt;&lt;/p-pickList&gt;

&lt;button type="button" pButton (click)="pl.resetFilter()" label="Reset"&gt;&lt;/button&gt;
</app-code>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>item</td>
                            <td>$implicit: Data of the item<br />
                                index: Index of the item</td>
                        </tr>
                        <tr>
                            <td>sourceHeader</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>targetHeader</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>sourceFilter</td>
                            <td>options.filter: Callback to filter data by the value param<br />
                                options.reset: Resets the filters.
                            </td>
                        </tr>
                        <tr>
                            <td>targetFilter</td>
                            <td>options.filter: Callback to filter data by the value param<br />
                                options.reset: Resets the filters
                            </td>
                        </tr>
                        <tr>
                            <td>emptymessagesource</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>emptyfiltermessagesource</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>emptymessagetarget</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>emptyfiltermessagetarget</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-picklist</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-picklist-source-controls</td>
                            <td>Container of source list buttons.</td>
                        </tr>
                        <tr>
                            <td>p-picklist-target-controls</td>
                            <td>Container of target list buttons.</td>
                        </tr>
                        <tr>
                            <td>p-picklist-buttons</td>
                            <td>Container of buttons.</td>
                        </tr>
                        <tr>
                            <td>p-picklist-list</td>
                            <td>List element.</td>
                        </tr>
                        <tr>
                            <td>p-picklist-item</td>
                            <td>An item in the list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>Angular CDK.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/picklist" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-picklist-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-pickList [source]="sourceProducts" [target]="targetProducts" sourceHeader="Available" targetHeader="Selected" [dragdrop]="true"
    [responsive]="true" [sourceStyle]="&#123;'height':'30rem'&#125;" [targetStyle]="&#123;'height':'30rem'&#125;" filterBy="name"
    sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name"&gt;
    &lt;ng-template let-product pTemplate="item"&gt;
        &lt;div class="product-item"&gt;
            &lt;div class="image-container"&gt;
                    &lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.name" class="product-image" /&gt;
            &lt;/div&gt;
            &lt;div class="product-list-detail"&gt;
                &lt;h5 class="mb-2"&gt;&#123;&#123;product.name&#125;&#125;&lt;/h5&gt;
                &lt;i class="pi pi-tag product-category-icon"&gt;&lt;/i&gt;
                &lt;span class="product-category"&gt;&#123;&#123;product.category&#125;&#125;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="product-list-action"&gt;
                &lt;h6 class="mb-2"&gt;$&#123;&#123;product.price&#125;&#125;&lt;/h6&gt;
                &lt;span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()"&gt;&#123;&#123;product.inventoryStatus&#125;&#125;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-pickList&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class PickListDemo &#123;

    sourceProducts: Product[];

    targetProducts: Product[];

    constructor(private carService: ProductService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getProductsSmall().then(products => this.sourceProducts = products);
        this.targetProducts = [];
    &#125;
&#125;
</app-code>
<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
.product-item &#123;
    display: flex;
    align-items: center;
    padding: .5rem;
    width: 100%;

    img &#123;
        width: 75px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        margin-right: 1rem;
    &#125;

    .product-list-detail &#123;
        flex: 1 1 0;
    &#125;

    .product-list-action &#123;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    &#125;

    .product-category-icon &#123;
        vertical-align: middle;
        margin-right: .5rem;
    &#125;

    .product-category &#123;
        vertical-align: middle;
        line-height: 1;
    &#125;
&#125;

@media screen and (max-width: 576px) &#123;
    .product-item &#123;
        flex-wrap: wrap;

        .image-container &#123;
            width: 100%;
            text-align: center;
        &#125;

        img &#123;
            margin: 0 0 1rem 0;
            width: 100px;
        &#125;
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-picklist-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
